<template>
    <div class="back_contain_n">
        <div class="top_mouth">
            <div  class="mouth_list">
				<i class="el-icon-caret-left icon_el" @click="chooseLastYear"></i>
                <li class="list_nav year">{{ query.execYear }}</li>
				<i class="el-icon-caret-right icon_el" @click="nextLastYear"></i>
                <li class="list_nav mouth" v-for="(item,index) in mouthList" :key="index"
                    :class="{'active': item.active,'click': tipsData.mouthClick == item.name}"
                    @click="changeMouth(item)"
                >
                    {{item.name}}
                </li>
            </div>
        </div>
		<div class="Search_Top_Input">
			<div class="addNew">
				<span @click="edit({},'add')" v-if="hasRole('manage:photovoltaic:add') "><i class="el-icon-circle-plus-outline"></i> 光伏录入</span>
			</div>
		</div>
        <!-- table -->
        <sys-table  
            :tableData="tableData" 
            :tableLoading="tableLoading" 
            :tableHeader="tableHeader"
			ref="systable"
            :scopeWidth="120"
        >
            <template slot-scope="scope" slot="operate">
                <el-button @click="edit(scope.row,'see')" type="text" size="small">查看</el-button>
				<el-button @click="edit(scope.row,'edit')" type="text" size="small">编辑</el-button>
            </template>
        </sys-table>
        
        <!-- 新建弹框 -->
        <div class="zll-dialog">
            <popout  :title="type == 'add'?'光伏录入':'光伏查看'"  :visible.sync="addDialog" v-if="addDialog" class="bigSize">
                <Add ref="add" slot="content" :editData="editData" :type="type" @refreshData="refreshData" :execYear="query.execYear" :execMoth="query.execMoth" :recordDay="recordDay"></Add>
                <template slot="bottom">
                    <p class="zll-botton Info" @click="addDialog = false">关 闭</p>
                    <p class="zll-botton Info" v-if="type !== 'see' && !dataIsValid">提 交</p>
                    <p class="zll-botton" v-if="type !== 'see' && dataIsValid" @click="()=>{this.$refs.add.submitForm('addForm')}">提 交</p>
                </template>
            </popout>
        </div> 
    </div>
</template>

<script>
import Add from './add';
export default {
    data(){
        return {
            mouthList: [
                {name: '1月',active: false,month:'1'},
                {name: '2月',active: false,month:'2'},
                {name: '3月',active: false,month:'3'},
                {name: '4月',active: false,month:'4'},
                {name: '5月',active: false,month:'5'},
                {name: '6月',active: false,month:'6'},
                {name: '7月',active: false,month:'7'},
                {name: '8月',active: false,month:'8'},
                {name: '9月',active: false,month:'9'},
                {name: '10月',active: false,month:'10'},
                {name: '11月',active: false,month:'11'},
                {name: '12月',active: false,month:'12'},
            ],
            haveMouth: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
            tipsData: {
                mouthClick: '1月',
            },
            tableLoading:true, //table刷新
            type: '',
            editData: {},
            query: {
                execYear:new Date().getFullYear(),
				execMoth:new Date().getMonth() + 1,
            },

			recordDay: 0,

            tableData: [{},{}],
            tableHeader:[],
            addDialog: false, 
            dataIsValid: false,
        }
    },
    methods: {
        chooseLastYear(){
            this.query.execYear = this.query.execYear - 1;
            this.getList();
        },
        nextLastYear(){
            this.query.execYear = this.query.execYear + 1;
            this.getList();
        },
        changeMouth(val) {

            if(val.active) {
                this.tipsData.mouthClick = val.name;
                this.query.execMoth = val.month;
                this.getList();
            }
        },
        getList(){//获取表格数据
			let self = this;
			self.tableData = [];
			self.tableLoading = true;
			self.$refs.systable.resetPage();
			self.$http({
				url: "/jinl/photovoltaic/getPhotovoltaicList",
				method: "post",
				data: JSON.stringify(self.query),
				dataType: 'json',
				contentType: 'application/json',
			}).then(resp=>{
				if (resp.success) {
					self.tableHeader =  [
						{"columnValue": "monthDay", "columnName": "日期" },
						{"columnValue": "powerGeneration", "columnName": "日发电量（MWh）" },
						{"columnValue": "co2", "columnName": "CO2减排（吨）" },
						{"columnValue": "equivalentPlant", "columnName": "等效绿植（棵）" },
						{"columnValue": "selfConsumption", "columnName": "自用电量（MWh）" },
						{"columnValue": "powerSurplus", "columnName": "余电电量（MWh）" },
						{"columnValue": "selfUseRate", "columnName": "自用率" },
					];

					let index = resp.result.length;
					if (index>0){
						let length = resp.result.length;
						self.recordDay = parseInt(resp.result[length-1].recordDay);
					}else {
						self.recordDay = 0;
					}
					self.recordDay++;

					self.tableData = resp.result;
					self.tableLoading = false;

				}
			});
        },


		refreshData() {
			this.getList();
			this.addDialog = false;
		},

        edit(val,type) {
			let self = this;
			self.addDialog = true;
				self.getDataIsValid(type)


			self.$nextTick(()=> {
				self.type = type;
				self.editData = Object.assign({},val);
			});
        },
        getDataIsValid(type){
			let self = this;

			//传入月份的总天数
			let days = new Date(self.query.execYear,self.query.execMoth,0).getDate();
			console.log(days,'---------------days')

			//传入的天数是否在本月中
			if (self.recordDay > days){
				self.$message.warning("当月无法新增日期");
				self.dataIsValid = false;
				return;
			}
			
			//如果录入日期等于当前日期----录入时间必须在晚上8点之后
			let currentDate = new Date();
			let currentYear = currentDate.getFullYear();
			let currentMonth = currentDate.getMonth()+1;
			let currentDay = currentDate.getDate();
			let currentHour = currentDate.getHours();
			if (type=="add"){
				if (self.query.execYear == currentYear && self.query.execMoth == currentMonth && self.recordDay == currentDay && currentHour < 20){
					self.$message.warning("请晚上8点之后录入数据");
					self.dataIsValid = false;
					return;
				}
			}else if (type=="edit"){
				self.dataIsValid = true;
				return;
			}


			if (self.query.execYear < currentYear){
				self.dataIsValid = true;
				return;
			}

			if (self.query.execYear == currentYear && self.query.execMoth < currentMonth){
				self.dataIsValid = true;
				return;
			}

			if (self.query.execYear == currentYear && self.query.execMoth == currentMonth && self.recordDay < currentDay){
				self.dataIsValid = true;
				return;
			}

			self.dataIsValid = false;

		},

        setMouthStyle() {
            for(var i = 0;i < this.mouthList.length;i++) {
                this.haveMouth.filter((val) => {
                    if(val == this.mouthList[i].name) {
                        this.mouthList[i].active = true;
						// this.query.execMoth = this.mouthList[i].month;
                    }
                })
            }
        },
    },
    mounted(){
        let self = this;
        self.getList();//显示table
        self.setMouthStyle()
        self.$eventBus.$on("updateWorkList",function () {
            self.addDialog = false;
            self.getList()
        })
        
        self.tipsData.mouthClick = new Date().getMonth()+1 + '月';
    },
    components: {
        Add,
    }
}
</script>

<style lang="scss" scoped>
@import "@/style/SearchTop.scss";
.top_mouth {
    position: relative;
    .mouth_list {
        width: 100%;
        display: flex;
        margin-bottom: 15px;
        .icon_el {
            color: #FF9800;
            font-size: 26px;
            line-height: 30px;
            cursor: pointer;
            &:hover {
                opacity: .7;
            }
        }
        .list_nav {
            text-align: center;
            line-height: 30px;
            width: 5%;
            &.year {
                color: #fff;
                background-color: #34bfc6;
                font-size: 14px;
                padding: 0 5px;
                width: 100px;
            }
            &.mouth {
                color:#ccc;
                border-bottom: 1px solid #fff;
                cursor: no-drop;
                padding: 0 10px;
                transition: all .5s;
                &.active {
                    color: #34bfc6;
                    cursor: pointer;
                }
                &.click {
                    border-bottom: 1px solid #34bfc6;
                    font-weight: 600;
                    font-size: 14px;
                    position: relative;
                }
                &:hover {
                    font-weight: 600;
                }
            }
        }
    }
}
</style>